<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>🔧 消息位置修复验证</title>
    <link rel="stylesheet" href="/styles/living_workspace.css">
    <style>
        body { 
            padding: 20px; 
            font-family: Arial, sans-serif; 
            background: #f5f5f5;
        }
        .container { 
            max-width: 800px; 
            margin: 0 auto; 
            background: white; 
            border-radius: 10px; 
            padding: 20px; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-area {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 20px 0;
            background: #fafafa;
            height: 400px;
            overflow-y: auto;
        }
        .status {
            padding: 10px 15px;
            margin: 10px 0;
            border-radius: 5px;
            font-weight: bold;
        }
        .status.success { background: #d4edda; color: #155724; }
        .status.error { background: #f8d7da; color: #721c24; }
        .status.info { background: #d1ecf1; color: #0c5460; }
        
        button {
            padding: 10px 20px;
            margin: 5px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover { background: #5a67d8; }
        
        .debug-info {
            background: #1a1a1a;
            color: #0f0;
            padding: 15px;
            font-family: monospace;
            font-size: 12px;
            max-height: 200px;
            overflow-y: auto;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔧 消息位置修复验证</h1>
        
        <div class="status info">
            ✅ CSS修复已应用：
            <br>• 增加了AI消息的 flex-direction: row
            <br>• 添加了强制优先级样式 (!important)
            <br>• 确保用户消息在右边，AI消息在左边
        </div>
        
        <div>
            <button onclick="runTest()">🧪 运行位置测试</button>
            <button onclick="clearTest()">🧹 清空测试</button>
            <button onclick="runApiTest()">📡 测试API调用</button>
        </div>
        
        <div class="test-area chat-history" id="testArea"></div>
        
        <div class="debug-info" id="debugInfo">等待测试...</div>
        
        <div class="status" id="result">点击"运行位置测试"开始验证修复效果</div>
    </div>

    <script>
        function log(message, type = 'info') {
            const debugDiv = document.getElementById('debugInfo');
            const time = new Date().toLocaleTimeString();
            debugDiv.innerHTML += `<div>[${time}] ${message}</div>`;
            debugDiv.scrollTop = debugDiv.scrollHeight;
        }
        
        function setResult(message, type = 'info') {
            const resultDiv = document.getElementById('result');
            resultDiv.className = `status ${type}`;
            resultDiv.innerHTML = message;
        }
        
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
        
        function addTestMessage(type, content, loading = false) {
            const testArea = document.getElementById('testArea');
            const messageId = 'test_' + Date.now();
            const messageEl = document.createElement('div');
            messageEl.className = `message-wrapper ${type}-message-wrapper`;
            messageEl.id = messageId;
            
            log(`🎨 创建${type}消息: ${messageEl.className}`);
            
            if (type === 'user') {
                messageEl.innerHTML = `
                    <div class="message user-message">
                        <div class="message-content">
                            <div class="message-text">${escapeHtml(content)}</div>
                            <div class="message-time">${new Date().toLocaleTimeString()}</div>
                        </div>
                        <div class="message-avatar user-avatar">
                            <i class="fas fa-user"></i>
                        </div>
                    </div>
                `;
            } else {
                messageEl.innerHTML = `
                    <div class="message ai-message">
                        <div class="message-avatar ai-avatar">
                            <i class="fas fa-robot"></i>
                        </div>
                        <div class="message-content">
                            ${loading ? 
                                `<div class="loading-state">
                                    <div class="loading-spinner">⚙️</div>
                                    <div class="loading-text">伯乐正在思考中...</div>
                                </div>` :
                                `<div class="message-text">${escapeHtml(content)}</div>
                                 <div class="message-time">${new Date().toLocaleTimeString()}</div>`
                            }
                        </div>
                    </div>
                `;
            }
            
            testArea.appendChild(messageEl);
            
            // 检查样式
            const computedStyle = window.getComputedStyle(messageEl);
            log(`📊 ${type}消息样式: justify-content=${computedStyle.justifyContent}`);
            
            return messageId;
        }
        
        function updateTestMessage(messageId, content) {
            const messageEl = document.getElementById(messageId);
            if (messageEl) {
                const messageContent = messageEl.querySelector('.message-content');
                if (messageContent) {
                    messageContent.innerHTML = `
                        <div class="message-text">${escapeHtml(content)}</div>
                        <div class="message-time">${new Date().toLocaleTimeString()}</div>
                    `;
                    log(`✅ 消息已更新: ${messageId}`);
                }
            }
        }
        
        function runTest() {
            log('🧪=== 开始位置测试 ===');
            clearTest();
            
            // 测试1: 用户消息（应该在右边）
            const userMsgId = addTestMessage('user', '这是用户消息，应该显示在右边');
            
            // 测试2: AI loading消息（应该在左边）
            const aiMsgId = addTestMessage('ai', '', true);
            
            // 测试3: 3秒后更新AI消息
            setTimeout(() => {
                updateTestMessage(aiMsgId, '这是AI回复消息，应该显示在左边，替换loading状态');
                
                // 检查最终结果
                setTimeout(() => {
                    checkResults();
                }, 1000);
            }, 3000);
        }
        
        function checkResults() {
            const messages = document.querySelectorAll('#testArea .message-wrapper');
            let userCorrect = false;
            let aiCorrect = false;
            
            messages.forEach((msg) => {
                const computedStyle = window.getComputedStyle(msg);
                const isUser = msg.classList.contains('user-message-wrapper');
                const isAI = msg.classList.contains('ai-message-wrapper');
                
                if (isUser && computedStyle.justifyContent === 'flex-end') {
                    userCorrect = true;
                    log('✅ 用户消息位置正确 (右边)');
                } else if (isAI && computedStyle.justifyContent === 'flex-start') {
                    aiCorrect = true;
                    log('✅ AI消息位置正确 (左边)');
                }
            });
            
            if (userCorrect && aiCorrect) {
                setResult('🎉 修复成功！用户消息在右边，AI消息在左边', 'success');
                log('🎉 所有消息位置正确！');
            } else {
                setResult('❌ 修复未完全生效，请检查CSS样式', 'error');
                log('❌ 消息位置仍有问题');
            }
        }
        
        async function runApiTest() {
            log('📡=== 开始API测试 ===');
            const apiUrl = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/api/chat`;
            
            try {
                addTestMessage('user', '找几个Python工程师');
                const aiMsgId = addTestMessage('ai', '', true);
                
                const response = await fetch(apiUrl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ message: '找几个Python工程师' })
                });
                
                if (response.ok) {
                    const data = await response.json();
                    if (data.success) {
                        updateTestMessage(aiMsgId, data.message);
                        log('✅ API测试成功');
                        setTimeout(checkResults, 1000);
                    }
                } else {
                    log('❌ API请求失败');
                }
            } catch (error) {
                log('❌ API测试异常: ' + error.message);
            }
        }
        
        function clearTest() {
            document.getElementById('testArea').innerHTML = '';
            document.getElementById('debugInfo').innerHTML = '测试已清空';
            setResult('测试已清空，可以重新开始', 'info');
        }
        
        // 页面加载完成后自动测试
        window.onload = () => {
            log('🚀 验证页面加载完成');
            setTimeout(runTest, 1000);
        };
    </script>
</body>
</html>










